<template>
  <div>
    <strong>图书后台管理系统</strong>
    <div class="header-avatar">
      <span class="el-dropdown-link">当前用户：{{ userInfo.username }}</span>
      <el-button type="text" @click="open">退出登录</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: "PageHeader",
  data() {
    return {
      userInfo: {},
      dialogVisible: false
    }
  },
  methods: {
    getUserInfo: function () {
      this.$axios.get("/sys/user/info").then(res => {
            this.userInfo = res.data.data;
          }
      );
    },
    open() {
      this.$confirm('是否确认退出登录?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.logout();
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消退出登录'
        });
      });
    },
    logout() {

      this.$axios.post("/logout").then(res => {
        localStorage.clear();
        sessionStorage.clear();
        this.$store.commit("resetState");
      });
      this.dialogVisible = false;
      this.$router.push("/login");
    }
  },
  created() {
    this.getUserInfo()
  }
}
</script>

<style scoped>
.header-avatar {
  float: right;
  width: 200px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.el-dropdown-link {
  cursor: pointer;
}

</style>
